<template>
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
		<cl-pagefull>
			<template #head>
				<el-row>
					<cl-filter-group v-model="search" @reset="changeBiz">
						<cl-filter label="所属事业部">
							<cl-select
								v-model="search.biz_id"
								placeholder="请选择"
								filterable
								@change="changeBiz"
							>
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="分公司">
							<cl-select
								v-model="search.company_id"
								placeholder="请选择"
								clearable
								filterable
								@change="refresh"
							>
								<el-option label="全部" value="" />
								<el-option
									v-for="item in bizRefData.company"
									:key="item.company_id"
									:label="item.company_name"
									:value="item.company_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="所属门店">
							<cl-select
								v-model="search.dept_id"
								placeholder="请选择"
								filterable
								clearable
								@change="refresh"
							>
								<el-option label="全部" value="" />

								<el-option
									v-for="item in bizRefData.shop_childs"
									:key="item.dept_id"
									:label="item.dept_name"
									:value="item.dept_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="品牌">
							<cl-select
								v-model="search.bra_id"
								placeholder="全部"
								clearable
								filterable
								style="width: 160px"
								@change="refresh"
								multiple
								collapse-tags
							>
								<el-option
									v-for="item in bizRefData.brand"
									:key="item.bra_id"
									:label="item.bra_name"
									:value="item.bra_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="客户关键字">
							<cl-keyword-search
								:value="{
									search_content: search.search,
									keyword_type: search.keyword_type
								}"
								@update="updateKeyword"
							/>
							<!-- <el-input
								v-model="search.search"
								placeholder="手机号/微信号/客户名称/会员号"
								clearable
								style="width: 220px"
								@change="refresh"
							/> -->
						</cl-filter>
						<cl-filter label="下定日期">
							<cl-date-picker
								v-model="search.time"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								style="width: 210px"
								clearable
								@change="refresh"
								:picker-options="pickerOptions"
							/>
						</cl-filter>
						<cl-filter label="推送日期">
							<cl-date-picker
								v-model="search.ptime"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								style="width: 210px"
								clearable
								@change="refresh"
								:picker-options="pickerOptions"
							/>
						</cl-filter>
						<cl-filter label="接收日期">
							<cl-date-picker
								v-model="search.gtime"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								style="width: 210px"
								clearable
								@change="refresh"
								:picker-options="pickerOptions"
							/>
						</cl-filter>
						<cl-filter label="推送状态">
							<cl-select
								v-model="search.is_push"
								placeholder="推送状态"
								@change="refresh"
							>
								<el-option
									v-for="item in pushStatusList"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="接收状态">
							<cl-select
								v-model="search.is_get"
								placeholder="接收状态"
								@change="refresh"
							>
								<el-option
									v-for="item in getStatusList"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="列表信息">
							<cl-select
								v-model="search.user_id"
								placeholder="列表信息"
								clearable
								@change="refresh"
							>
								<el-option label="只看自己" :value="userInfo.user_id" />
								<el-option label="看全部" value="" />
							</cl-select>
						</cl-filter>
					</cl-filter-group>
				</el-row>
			</template>

			<el-row>
				<!-- 数据表格 -->
				<cl-table v-bind="table" ref="table">
					<cl-empty slot="empty" />
					<template #column-customer="{ scope: { row } }">
						<cl-customer
							:gender="row.cus_sex"
							:name="row.cus_name"
							:cusId="row.cus_id + '' || '-'"
							:avatar="row.cus_img"
							:id_join_type="row.id_join_type"
						/>
					</template>
					<template #column-push_time="{ scope: { row } }">
						<div v-if="row.is_push">
							{{ row.push_time }}
							<div class="color-info">{{ row.push_user_name }}</div>
						</div>
					</template>
					<template #column-get_time="{ scope: { row } }">
						<div v-if="row.is_get">
							{{ row.get_time | dateFormat("YYYY-MM-DD HH:mm") }}
							<div class="color-info">{{ row.get_user_name }}</div>
						</div>
					</template>
					<template #column-opt="{ scope: { row } }">
						<el-button
							v-if="row.is_push ==0 || row.is_get ==2"
							type="primary"
							v-auth="'store_cuspushdeposit_push'"
							@click.stop="pushClick(row)"
						>
							推送
						</el-button>
					</template>
				</cl-table>
			</el-row>

			<template #foot>
				<el-row type="flex">
					<cl-flex1 />
					<!-- 分页控件 -->
					<cl-pagination />
				</el-row>
			</template>
		</cl-pagefull>
	</cl-crud>
</template>

<script>
import { mapState } from "vuex";
import dayjs from "dayjs";

export default {
	name: "CusOtherEarnestPush",
	inject: ["$layout"],
	data() {
		return {
			pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					}
			},
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				columns: [
					{ label: "客户信息", prop: "customer", width: 210, fixed: true },
					{ label: "下定金门店", prop: "dept_name", minWidth: 120 },
					{
						label: "定金金额（￥）",
						prop: "dep_amount",
						minWidth: 120
					},
					{ label: "下定金日期", prop: "pay_date", minWidth: 120 },
					{ label: "创建人", prop: "user_name", minWidth: 120 },
					{
						label: "推送状态",
						prop: "is_push",
						minWidth: 120,
						formatter: row => (row.is_push ? "已推送" : "未推送")
					},
					{ label: "推送时间", prop: "push_time", minWidth: 140 },
					{
						label: "接收状态",
						prop: "is_get",
						minWidth: 120,
						formatter: row => {
							return row.is_get == 1 ? "接收" : row.is_get == 2 ? "拒接" : "未接收";
						}
					},
					{ label: "接收时间", prop: "get_time", minWidth: 140 },
					{ label: "操作", prop: "opt", width: 90, fixed: "right" }
				],
				on: {
					"row-click": row => {
						this.$layout.openCusDetail(row, "earnest");
					}
				}
			},
			shopList: [], //门店数据
			companyList: [],
			brandList: [],
			pushStatusList: [
				{ value: 0, label: "全部" },
				{ value: 1, label: "推送" },
				{ value: 2, label: "未推送" }
			],
			getStatusList: [
				{ value: 0, label: "全部" },
				{ value: 1, label: "接收" },
				{ value: 2, label: "拒接" },
				{ value: 3, label: "未接收" }
			],
			search: {
				search: "",
				biz_id: "",
				company_id: "",
				dept_id: "", // 门店ID
				is_get: 0, // 3未接收 1接收 2拒接' 0全部
				is_push: 0, // 0全部1推送 2未推送
				time: [dayjs().format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")],
				btime: "", // 定金日期开始时间
				etime: "", // 定金日期结束时间
				ptime: [],
				ptime_s: "", // 推送开始时间
				ptime_e: "", // 推送结束时间
				gtime: [],
				gtime_s: "", // 接收开始时间
				gtime_e: "", // 接收结束时间
				pagedata: 1, //分页数据是否开启，1-开启
				user_id: "",
				bra_id: [],
				keyword_type: 4
			}
		};
	},
	computed: {
		...mapState("common", ["visibleCusDetail", "cusFormSubmit"]),
		bizRefData() {
			const { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		}
	},
	watch: {
		visibleCusDetail(v) {
			!v && this.refresh(false);
		},
		cusFormSubmit(v) {
			v && this.refresh();
		}
	},
	created() {
		const { user_id } = this.userInfo;
		this.search.user_id = user_id;
		this.search.biz_id = this.getCurrBiz();
		this.init();
	},
	methods: {
		updateKeyword(e) {
			this.search.search = e.search_content.trim();
			this.search.keyword_type = e.keyword_type;
		},
		async init() {
			const { biz_id } = this.search;
			this.getBizRefCompany(biz_id);
			this.getBizRefBrand(biz_id);
			this.getBizRefShop(biz_id);
		},
		async onRefresh(params, { next, render, done }) {
			// if (!params.bra_id.length) {
			// 	this.$message.error("请选择品牌");
			// 	return done();
			// }
			if(params.search&&params.search.length < 2){
				this.$message.error("使用关键字搜索时中文至少2位查询，其他至少4位可查询");
				return done();
			}
        
			// this.loading = true;
			const { data } = await next(params)
			// console.log(data)
			// render(data);
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.deposit)
				.set("dict", {
					api: {
						page: "mine"
					}
				})
				.done();
			app.refresh(this.search);
		},
		// crud刷新
		refresh(reset = true) {
			let params = { ...this.search };

			if (reset) {
				params.page = 1;
			}
			this.$refs.crud.refresh(params);
			this.$nextTick(() => {
				this.$refs.table?.calcMaxHeight?.();
			});
		},
		async pushClick(row) {
			const data = await this.$service.deposit.push({ dep_id: row.dep_id });
			row.is_push = data.is_push;
			row.push_time = data.push_time;
			this.$message.success("推送成功");
			this.refresh()
		},
		changeBiz(v) {
			this.search = {
				...this.search,
				company_id: "",
				bra_id: [],
				dept_id: ""
			};
			// this.refresh();
			// this.getShopList();
			this.init();
		}
	}
};
</script>

<style lang="scss" scoped></style>
